<template>
  <el-dialog
      :title="dataForm.id ? $t('common.editBtn') : $t('common.addBtn') "
      v-model="visible"
      width="600"
      :close-on-click-modal="false"
      draggable
  >
    <el-form :model="dataForm" :rules="dataRules" label-width="90px" ref="dataFormRef" v-loading="loading">
      <el-row :gutter="20">

        <el-col :span="12" class="mb-6">
          <el-form-item :label="$t('warehouse.warehouseCode')" prop="warehouseCode">
            <el-input clearable placeholder="请输入仓库编码" v-model="dataForm.warehouseCode"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb-6">
          <el-form-item :label="$t('warehouse.warehouseName')" prop="warehouseName">
            <el-input clearable placeholder="请输入仓库名称" v-model="dataForm.warehouseName"/>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12" class="mb-6">
          <el-form-item label="类型名称" prop="warehouseTypeName">
            <el-input clearable placeholder="请输入仓库类型名称" v-model="dataForm.warehouseTypeName"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="">
          <el-form-item label="类型代码" prop="warehouseTypeCode">
            <el-input clearable placeholder="请输入仓库类型代码" v-model="dataForm.warehouseTypeCode"/>
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="12" class="">
          <el-form-item label="erpId" prop="erpId">
            //数字输入框
            <el-input-number v-model="dataForm.erpId" placeholder="请输入erpId" :min="0" :max="9999999999"
                             :precision="0" :step="1"/>
          </el-form-item>
        </el-col> -->
        <el-col :span="12" class="mb-6">
          <el-form-item label="ERP仓库" prop="erpWarehouse">
            <el-input clearable placeholder="请输入ERP仓库" v-model="dataForm.erpWarehouse"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="是否启用" prop="lockFlag">
            <el-radio-group v-model="dataForm.forbiddenStatus">
              <el-radio :key="index" :label="item.value" border v-for="(item, index) in YN">{{
                  item.label === 'Y' ? '是' : '否'
                }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
        <el-button type="primary" @click="onSubmit"
                   :disabled="loading">{{ $t('common.confirmButtonText') }} </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">

import {useDict} from "/@/hooks/dict";
import {addWarehouse, updateWarehouse} from "/@/api/platform/wms/warehouse";
import {WmsWarehouse} from "/@/api/platform/wms/apiTypes";
import {useMessage} from "/@/hooks/message";
import {useI18n} from "vue-i18n";

const {t} = useI18n();

// 定义变量内容
const dataFormRef = ref();
const visible = ref(false);
const loading = ref(false);

// 获取数据字典
// @ts-ignore
const {YN} = useDict('YN');

// 定义form数据
const dataForm: WmsWarehouse = reactive<WmsWarehouse>({
  id: null,
  forbiddenStatus: "Y",
  warehouseCode: '' as String | undefined,
  warehouseName: '' as String | undefined,
  // warehouseTypeCode: '' as String | undefined,
  // warehouseTypeName: '' as String | undefined,
  // erpId: null,
  erpWarehouse: '' as String | undefined
});

// 定义表单校验规则
const dataRules = reactive({
  warehouseCode: [
    {required: true, message: '请输入仓库编码', trigger: 'blur'},
    // 限制英文和数字
    {pattern: /^[A-Za-z0-9]+$/, message: '只能输入英文和数字', trigger: 'blur'},
    {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
  ],
  warehouseName: [
    {required: true, message: '请输入仓库名称', trigger: 'blur'},
    {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
  ],
  erpWarehouse: [
    {required: true, message: '请输入ERP仓库名称', trigger: 'blur'},
    {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
  ],
  // warehouseTypeCode: [
  //   {required: true, message: '请输入仓库类型编码', trigger: 'blur'},
  // ],
  // warehouseTypeName: [
  //   {required: true, message: '请输入仓库类型名称', trigger: 'blur'},
  // ],
  forbiddenStatus: [
    {required: true, message: '请选择是否禁用', trigger: 'blur'},
  ],
})

// 通知父组件刷新
const emit = defineEmits(['refresh']);

// 提交表单
const onSubmit = async () => {
  loading.value = true;
  dataFormRef.value.validate((valid: boolean) => {
    if (!valid) {
      loading.value = false;
      return false;
    }
    if (dataForm.id) {
      // id存在 则更新数据
      updateWarehouse(dataForm).then((res: any) => {
        if (res.code !== 0) {
          useMessage().error(res.msg);
          return
        }
        loading.value = false;
        visible.value = false;
        emit('refresh');
        // 成功提示
        useMessage().success("更新成功!");
      }).catch(error => {
        loading.value = false;
        useMessage().error(error.msg);
      })

    } else {
      // dataForm将除了id以外的数据解构出来
      const {id, ...submitData} = dataForm;
      // id不存在 则新增数据
      addWarehouse(submitData).then((res: any) => {
        if (res.code !== 0) {
          useMessage().error(res.msg);
          return
        }
        loading.value = false;
        visible.value = false;
        emit('refresh');
        // 成功提示
        useMessage().success(t('common.addSuccessText'));
      }).catch(error => {
        loading.value = false;
        useMessage().error(error.msg);
      })
    }
  })
};

// 打开弹框
const openAddDialog = () => {
  visible.value = true;
  dataForm.id = undefined

  // 重置表单数据
  nextTick(() => {
    dataFormRef.value?.resetFields();
  });

};

// 编辑弹框
const openEditDialog = (data: any) => {
  visible.value = true;
  // 将data中的数据解构到dataForm中
  Object.assign(dataForm, data);
}

// 暴露变量
defineExpose({
  openAddDialog, openEditDialog
});

</script>

<style scoped lang="scss">

</style>